/** 上下图文格式 */

import {StyleSheet, TouchableOpacity, View} from 'react-native';
import {BindItem} from '../mobx/home';
import {ObserverText} from './ObserverText';
import {contextStatus, dight} from '../utils';
import {Img} from './Img';
import {
  dpw12,
  dpw132,
  dpw14,
  dpw16,
  dpw24,
  dpw4,
  dpw8,
  dpw96,
} from '../constants';
import {LinearGradient} from './LinearGradient';
import {observer} from 'mobx-react-lite';
import {useUserInfoStore} from '../mobx';

interface ImgTextProps extends BindItem {
  isHor?: boolean; // 是否是横图
  isTag?: boolean; // 是否显示连载tag
  isJoin?: boolean; // 图片地址是否手动拼接
  idx?: number;
}

const orderObj: Record<string, string[]> = Object.freeze({
  '00': ['color_22', 'color_1'],
  '01': ['color_15', 'color_18'],
  '02': ['color_16', 'color_19'],
});

export const ImgText3 = observer(
  (props: ImgTextProps & {idx: number; navigation: any}) => {
    const {
      Author,
      ChapterCount,
      CoverUrl,
      ExtensionUrl,
      ReadCount,
      Status,
      Title,
      Description,
      Type,
      isHor,
      isTag = true,
      isJoin = true,
      idx,
      navigation,
      BID,
    } = props;
    const {userInfo} = useUserInfoStore();

    // 详情页
    const toDetail = () => {
      if (navigation) {
        if (!userInfo?.Token) {
          navigation.navigate('Login');
        } else {
          navigation.navigate('cartoon-detail', {bId: BID});
        }
      }
    };

    return (
      <TouchableOpacity style={styles.box} onPress={toDetail}>
        <View style={styles.imgbox}>
          <Img
            url={isHor ? ExtensionUrl : CoverUrl}
            style={styles.img}
            isJoin={isJoin}
          />
          {isTag && (
            <LinearGradient
              style={styles.tagbox}
              themeColors={
                idx > 2 ? ['color_17', 'color_20'] : orderObj[`0${idx}`]
              }>
              <ObserverText
                tKey={`${idx + 1}`}
                style={styles.tag}
                themeStyle={{color: 'color_2'}}
                type="desc"
              />
            </LinearGradient>
          )}
        </View>
        <View style={styles.info}>
          {Title && (
            <ObserverText
              tKey={Title}
              type="card-title"
              numberOfLines={1}
              ellipsizeMode="tail"
            />
          )}
          {Author && (
            <ObserverText
              tKey="author"
              tOptions={{author: Author}}
              type="desc"
              numberOfLines={1}
              ellipsizeMode="tail"
            />
          )}
          {Status && (
            <ObserverText
              style={{marginTop: dpw8}}
              {...contextStatus({Status, Type})}
              type="desc"
            />
          )}
          {ReadCount && (
            <ObserverText
              style={{marginTop: dpw12}}
              tKey="hotNum"
              tOptions={{number: dight(ReadCount)}}
              type="desc"
            />
          )}
        </View>
      </TouchableOpacity>
    );
  },
);

const styles = StyleSheet.create({
  box: {
    flexDirection: 'row',
    width: '100%',
    marginBottom: dpw24,
  },
  imgbox: {
    position: 'relative',
  },
  img: {
    width: dpw96,
    height: dpw132,
    objectFit: 'cover',
    borderRadius: dpw8,
    margin: 0,
  },
  tagbox: {
    position: 'absolute',
    left: 0,
    top: 0,
    borderBottomRightRadius: dpw8,
    borderTopLeftRadius: dpw8,
    zIndex: 1,
  },
  tag: {
    paddingHorizontal: dpw8,
    paddingVertical: dpw4,
    fontSize: dpw14,
    lineHeight: dpw16,
  },
  info: {
    marginLeft: dpw12,
    flex: 1,
  },
});
